import { useRef, useState } from 'react'
import { Image, Layer, Stage } from 'react-konva'
import useImage from 'use-image'

const URLImage = (props: any) => {
  const { image } = props
  const [img] = useImage(image.src)
  return (
    <Image
      image={img}
      x={image.x}
      y={image.y}
      // I will use offset to set origin to the center of the image
      offsetX={img ? img.width / 2 : 0}
      offsetY={img ? img.height / 2 : 0}
    />
  )
}

export default function View() {
  const dragUrl = useRef(null)
  const stageRef = useRef(null)
  const [images, setImages] = useState([])

  return (
    <div>
      Try to trag and image into the stage:
      <br />
      <img
        alt='lion'
        src='https://konvajs.org/assets/lion.png'
        draggable='true'
        onDragStart={e => {
          dragUrl.current = (e.target as HTMLImageElement).src
        }}
      />
      <div
        onDrop={e => {
          e.preventDefault()
          // register event position
          stageRef.current.setPointersPositions(e)
          // add image
          setImages(
            images.concat([
              {
                ...stageRef.current.getPointerPosition(),
                src: dragUrl.current
              }
            ])
          )
        }}
        onDragOver={e => e.preventDefault()}
      >
        <Stage
          width={window.innerWidth}
          height={window.innerHeight}
          style={{ border: '1px solid grey' }}
          ref={stageRef}
        >
          <Layer>
            {images.map((image, index) => {
              return <URLImage key={index} image={image} />
            })}
          </Layer>
        </Stage>
      </div>
    </div>
  )
}
